<template>
	<div>
		<text class="form-title">销售记录信息</text>
		<SalesRecForm @changePicker="changePicker" :formInline="formInline" :formItem="formItem"></SalesRecForm>
	</div>
</template>

<script>
	import SalesRecForm from "../../components/current/vForm.vue";

	export default {
		components: {
			SalesRecForm
		},
		data() {
			return {
				//表格参数
				formItem: [{
						type: 'picker',
						pickerType: '',
						label: "销售渠道",
						placeholder: "请选择销售渠道",
						array: ['第一个', '第二个', '第三个'],
						index: "",
						clumn: 'channel'
					},
					{
						type: 'input',
						label: "销售数量",
						inputType: 'number',
						placeholder: "请输入销售数量",
						inputEnd: 'select',
						options: [{
							value: '1',
							name: '件'
						}, {
							value: '2',
							name: '吨'
						}],
						clumn: 'num'
					},
					{
						type: 'input',
						label: "销售单价",
						inputType: 'digit',
						placeholder: "请输入销售单价",
						inputEnd: 'select',
						options: [{
							value: '1',
							name: '元'
						}],
						clumn: 'price'
					},
					{
						type: 'input',
						label: "销售金额",
						placeholder: "0",
						disabled: true,
						inputEnd: 'select',
						options: [{
							value: '1',
							name: '元'
						}],
						clumn: 'totalprice'
					},
					{
						type: 'input',
						label: "购买商家",
						placeholder: "请输入购买商家",
						clumn: 'businessman'
					},
					{
						type: 'picker',
						pickerType: 'date',
						label: "销售时间",
						placeholder: "请选择销售时间",
						index: '',
						clumn: 'time'
					},
					{
						type: 'textarea',
						placeholder: "请输入详细内容",
						clumn: 'detailInfo'
					}
				],
				//表单字段数据
				formInline: {
					channel: "",
					num: null,
					price: null,
					totalprice: "",
					businessman: "",
					time: "",
					detailInfo: "",
				},
				btnText: '发布'
			};
		},
		watch: {
			'formInline.num': function(val, oldVal) {
				this.formInline.totalprice = val * this.formInline.price
			},
			'formInline.price': function(val, oldVal) {
				this.formInline.totalprice = this.formInline.num * val
			}
		},
		methods: {
			// 选择器发生改变时
			changePicker(i, clumn, value) {
				// 普通选择器赋值
				if (this.formItem[i].pickerType == '' || this.formItem[i].pickerType == 'selector') {
					this.formInline[clumn] = this.formItem[i].array[value];
					return
				}
				//时间选择器赋值
				if (this.formItem[i].pickerType == 'date') {
					this.formInline[clumn] = value;
					return
				}
			},
		}
	};
</script>

<style>
	.form-title {
		padding: 0 5%;
		color: rgb(136, 136, 136);
		line-height: 60rpx;
	}
</style>
